<template>
  <div class="login-container">
    <el-card header="请先登录" class="login-card">
      <el-form :model="user" :rules="loginRules" ref="user" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" placeholder="请输入用户名" @keyup.enter.native="handleLogin"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" show-password>
          <el-input type="password" v-model="user.password" placeholder="请输入密码" @keyup.enter.native="handleLogin"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-row :span="24">
            <el-col :span="16">
              <el-input
                :maxlength="code.len"
                v-model="user.code"
                auto-complete="off"
                placeholder="请输入验证码" @keyup.enter.native="handleLogin">
                <!--                  <i slot="prefix"-->
                <!--                     class="icon-yanzhengma"></i>-->
              </el-input>
            </el-col>
            <el-col class="line" :span="1">&nbsp;</el-col>
            <el-col :span="7">
              <div class="login-code">
            <span class="login-code-img"
                  @click="refreshCode"
                  v-if="code.type == 'text'">{{code.value}}</span>
                <img :src="code.src"
                     class="login-code-img"
                     @click="refreshCode"
                     v-else/>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native.prevent="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {loginApi} from "../http/modules/login";
  export default {
    name: "Login",
    data() {
      return {
        user: {
          username: '',
          password: '',
          code: ''
        },
        code: {
          src: "http://localhost:8081/kaptcha",
          value: "",
          len: 4,
          type: "image"
        },
        loginRules: {
          username: [
            {required: true, message: "请输入用户名", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {min: 4, message: "密码长度最少为6位", trigger: "blur"}
          ],
          code: [
            {required: true, message: "请输入验证码", trigger: "blur"},
            {min: 4, max: 4, message: "验证码长度为4位", trigger: "blur"}
          ]
        }
      }
    },
    methods: {
      handleLogin() {
        loginApi.login(this.user).then((res) => {
          if (res.code === 200) {
            Cookies.set('token', res.data.token)
            sessionStorage.setItem('user', this.user.username)
            this.$router.push('/')
          } else {
            this.$message.error(res.msg)
            this.refreshCode()
            this.user.code = ''
          }

        }).catch((res) => {
          console.log(res)
        })

      },
      refreshCode() {
        this.code.src = "http://localhost:8081/kaptcha?t=" + new Date().getTime()
      }
    },
    created() {
      Cookies.remove('token')
    }
  }
</script>

<style scoped lang="scss">
  .login-card {
    width: 25rem;
    margin: 5rem auto;
  }
</style>
